<template>
  <div class="container">
    <div class="header">添加消费</div>
    <el-select v-model="expenseAdd.expenseType" placeholder="请选择消费类型">
      <el-option
        v-for="(item, index) in expenseTypeData"
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-input
      type="number"
      style="margin: 20px 0px 20px 0px"
      placeholder="请输入消费金额"
      v-model="expenseAdd.expenseMoney"
    ></el-input>
    <el-input
      type="text"
      style="margin: 0px 0px 20px 0px"
      placeholder="描述 非必填"
      v-model="expenseAdd.expenseDesc"
    ></el-input>
    <el-button @click="submitFun">提交</el-button>
  </div>
</template>

<script>

import {toRefs} from "vue";
import expenseAddJS from "./expenseAdd.js";
export default {
  name: "dataAdd",
  setup() {
    let {status,methodFun:{submitFun}} = expenseAddJS();
    let {userinfo,expenseAdd,expenseTypeData} = toRefs(status);
    return {
      submitFun,
      expenseTypeData,
      userinfo,
      expenseAdd,
    };
  },
};
</script>

<style lang='less' scoped>
.container {
  width: 700px !important;
  height: auto !important;
  box-sizing: border-box;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0px auto;
  border-radius: 16px;
  box-shadow: 1px 2px 10px 2px #333;
  .header {
    line-height: 50px;
    font-size: 30px;
    text-align: center;

    margin-bottom: 20px;
    font-family: "kaiti";
  }
}
</style>